<template>
    <div>
        <h2>添加权益</h2>
<table class="table table-bordered">
<tr>
    <td align="right">权益名称</td>
    <td><input type="text" v-model="state.qName"  /></td>
</tr>
<tr>

        <td align="right">头像</td>
                <td>
                    <input type="file" @change="change" />
                    <img v-if="src!=''" :src="src" alt="" width="70" height="70" />
                </td>

</tr>
<tr>
    <td></td>
    <td><input type="button" value="保存" @click="add" /></td>
</tr>
</table>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
let data = reactive({
    state: {
        qName: "",
  qPhoto: "",
    },
    src: ''
})
let { state, src } = toRefs(data)
const add = () => {
    let obj = {
        qName: state.value.qName,
        qPhoto: state.value.qPhoto,
    }
    axios({
        url: '/api/Member/AddQuanYi',
        method: 'post',
        data: obj
    })
        .then(res => {
            console.log(res)
            if(res.data.data==1){
                alert("添加成功")
                router.push("/Qlist")
            }
            if(res.data.data==-1){
                alert("名称不能重复")
                return
            }
        })
        .catch(err => {
            console.log(err)
        })
}
const change = (e: any) => {
    let FromData = new FormData()
    let obj = e.target.files[0]
    FromData.append("file", obj)
    axios({
        url: '/api/Member/GetImge',
        method: 'post',
        data: FromData
    })
        .then(res => {
            console.log(res)
            if (res.data.code == 1000) {
                alert("上传成功")
                src.value = "https://localhost:7096" + res.data.fileName
                state.value.qPhoto="https://localhost:7096" + res.data.fileName
            }
            else {
                alert("上传失败")
            }
        })
        .catch(err => {
            console.log(err)
        })
}
</script>

<style scoped>

</style>